<template>
  <div class="box">
    <div class="header">
      <div class="top">
        <div class="left">
          <div></div>
          已取消
        </div>
        <div class="right">
          <span>订单编号：164186098137124865</span>
          <span>下单时间：2023-03-30 11:47:54</span>
        </div>
      </div>
      <el-steps :active="1" align-center>
        <el-step title="提交订单"></el-step>
        <el-step title="付款成功"></el-step>
        <el-step title="商品发货"></el-step>
        <el-step title="确认收货"></el-step>
        <el-step title="订单完成"></el-step>
      </el-steps>
    </div>
    <div class="content">
        <div class="shopDetail">
          <p>订单商品</p>
          <ul>
            <li>商品信息</li>
            <li>单价</li>
            <li>数量</li>
            <li>小计</li>
            <li>实付</li>
          </ul>
          <ul>
            <li>
              <img src="" alt="">
              <div>
                <p>抓绒保暖，毛毛虫儿童运动鞋26-30</p>
                <span>颜色:(LXJ107) 尺码26</span>
              </div>
            </li>
            <li>￥109</li>
            <li>5</li>
            <li>￥545</li>
            <li>￥545</li>
          </ul>
        </div>
        <div>
          <p>收货信息</p>
          <ul>
            <li><p>收货人：</p></li>
            <li><p>联系方式：</p></li>
            <li><p>收货地址：</p></li>
          </ul>
        </div>
        <div>
          <p>支付方式及送货时间</p>
          <ul>
            <li><p>支付方式：</p></li>
            <li><p>送货时间：</p></li>
          </ul>
        </div>
        <div>
          <p>发票信息</p>
          <ul>
            <li><p>发票类型：</p></li>
            <li><p>发票内容：</p></li>
            <li><p>发票抬头：</p></li>
          </ul>
        </div>
        <div>
          <p>订单信息</p>
          <ul>
            <li><p>订单编号：</p></li>
            <li><p>下单时间：</p></li>
          </ul>
        </div>
    </div>
    <div class="footer">
      <ul>
        <li>
          <p>商品件数：</p>
          <span>5件</span>
        </li>
        <li>
          <p>商品总价：</p>
          <span>￥545</span>
        </li>
        <li>
          <p>运费：</p>
          <span>4</span>
        </li>
        <li>
          <p>应付总额：</p>
          <span>￥549</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
    name:'OrderDetail',
}
</script>

<style lang="less" scoped>
  .box{
    box-sizing: border-box;
    width: 1000px;
    margin-left: 100px;
    .header{
      margin: 50px 0;
      font-size: 16px;
      .top{
        margin-bottom: 50px;
        display: flex;
        justify-content: start;
        align-items: center;
        .left{
          display: flex;
          justify-content: center;
          align-items: center;
          flex-flow: column;
          div{
            width: 60px;
            height: 60px;
            background: green;
            border-radius: 50%;
            margin: 5px;
          }
        }
        .right{
          margin-left: 100px;
          display: flex;
          justify-content: start;
          flex-flow: column;
          span{
            margin: 5px;
            color: #ccc;
          }
        }
      }
    }
    .content{
      width: 100%;
      .shopDetail{
        width: 100%;
        display: flex;
        flex-flow: column;
        p{
          font-size: 20px;
        }
        ul{
          font-size: 14px;
          margin: 5px;
          width: 100%;
          li{
            font-size: 14px;
            text-align: center;
            float: left;
            line-height: 32px;
            width: 100px;
          }
          li:nth-child(1){
            width: 282px;
            text-align:left;
            display: flex;
            justify-content: space-evenly;
            margin-right: 47px;
            img{
                width: 70px;
                height: 70px;
                // background: aqua;
                margin: 5px;
            }
            div{
              margin-left: 10px;
              p{
                font-size: 12px;
              }
              span{
                color: #999999;
                font-size: 12px;
              }
            }
          }
        }
        ul:nth-child(2){
          li{
            line-height: 32px;
          }
        }
      }
      div{
        margin: 10px 0;
        p{
          font-size: 20px;
        }
        ul{
          margin: 40px;
          li{
            margin: 5px 0;
            p{
              color: #999;
              font-size: 16px;
            }
          }
        }
      }
    }
    .footer{
      display: flex;
      justify-content: end;
      font-size: 20px;
      li{
        display: flex;
        justify-content: space-between;
        margin: 8px 0;
        p{
          margin-right: 80px;
        }
      }
    }
  }
</style>